(function() {
	var containerId = "back";
	
	function emptyId(groupId) {
		return groupId + "-empty";
	}
	
	qype.backStack = {
		addGroup: function(groupId) {
			$("#" + containerId).append(sprintf('<div id="%s" class="hide-back"><div id="%s" class="hide-back"></div></div>', groupId, emptyId(groupId)));
		},
		showGroup: function(groupId) {
			mwl.setGroupTarget('#' + containerId, '#' + groupId, 'show-back', 'hide-back');
		},
		showGroupMwl: function(groupId) {
			return sprintf("mwl.setGroupTarget('#%s','#%s','show-back','hide-back');", containerId, groupId);
		},
		add: function(groupId, id, onclick) {
			var content = sprintf('<div id="%s" onclick="%s" class="hide-back"><div class="back-button">&nbsp;</div></div>', id, onclick);
			if($("#" + id).is("*")) {
				$("#" + id).replaceWith(content);
			} else {
				$("#" + groupId).append(content);
			}
		},
		show: function(groupId, id) {
			mwl.setGroupTarget('#' + groupId,'#' + (id || emptyId(groupId)),'show-back','hide-back');
		},
		showMwl: function(groupId, id) {
			return sprintf("mwl.setGroupTarget('#%s','#%s','show-back','hide-back');", groupId, id || emptyId(groupId));
		}
	};
})();
